<template>
  <!-- 添加外层容器包裹 -->
  <div class="app-container">
    <div class="blog-header">
      <BlogHeader/>
    </div>
    <!-- 为router-view添加内容容器 -->
   <div
      class="router-view-container"
      :style="{
        backgroundImage: `url(${bgImageUrl})`,
        backgroundSize: 'cover'
      }"
    >
      <router-view/>
    </div>
    <div class="blog-footer">
      <BlogFooter/>
    </div>
  </div>

</template>

<script setup>
import BlogHeader from '@/components/com/BlogHeader.vue'
import BlogFooter from '@/components/com/BlogFooter.vue'

const bgImageUrl = ref('') // 初始为空或默认图片

onMounted(async () => {
  try {
    const res = await axios.get('/api/blog/siteinfo/get_blog_background/', { requiresAuth: false })
    bgImageUrl.value = res.data.background
    // 如果后端返回完整URL可直接使用，若返回路径需要拼接：
    // bgImageUrl.value = import.meta.env.VITE_API_URL + res.data.path
  } catch (error) {
    console.error('获取背景失败:', error)
  }
})
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  position: relative; /* 确保子元素的定位相对于此容器 */
  overflow: hidden;
}

.blog-header {
  position: fixed; /* 固定位置 */
  top: 0; /* 置于顶部 */
  width: 100%; /* 占据整个宽度 */
  background-color: #fff; /* 可以根据需要设置背景颜色 */
  z-index: 1000; /* 确保header在其他内容之上 */
}

.router-view-container {
  margin-top: 36px;
  width: 100vw;
  min-height: calc(100vh - 36px);
  /* 移除了固定背景图设置，改为动态绑定 */
  background-color: #f2f2f2;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}


.blog-footer {
  /* 根据实际布局调整 */
  z-index: 1000; /* 确保header在其他内容之上 */
}
</style>
